<template>
  <div class="status-select-container" ref="containerRef">
    <div class="status-select-trigger" @click="toggleDropdown" :class="{ 'is-open': isOpen }">
      <span class="status-capsule" :class="getStatusCapsuleClass(modelValue)">
        {{ getStatusLabel(modelValue) }}
      </span>
      <div class="dropdown-arrow">
        <svg width="10" height="10" viewBox="0 0 12 12" fill="none">
          <path
            d="M3 4.5L6 7.5L9 4.5"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>
    </div>

    <div v-if="isOpen" class="status-dropdown">
      <div class="dropdown-options">
        <div
          v-for="option in options"
          :key="option.value"
          class="dropdown-option"
          :class="{ 'is-selected': option.value === modelValue }"
          @click="selectOption(option.value)"
        >
          <span class="status-capsule" :class="getStatusCapsuleClass(option.value)">
            {{ option.label }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'

export default {
  name: 'StatusSelect',
  props: {
    modelValue: {
      type: String,
      required: true,
    },
    options: {
      type: Array,
      required: true,
    },
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const isOpen = ref(false)
    const containerRef = ref(null)

    const toggleDropdown = () => {
      isOpen.value = !isOpen.value
    }

    const selectOption = value => {
      emit('update:modelValue', value)
      isOpen.value = false
    }

    const getStatusLabel = value => {
      const option = props.options.find(opt => opt.value === value)
      return option ? option.label : '全部'
    }

    const getStatusCapsuleClass = status => {
      const classMap = {
        pending: 'status-capsule-pending',
        success: 'status-capsule-success',
        failed: 'status-capsule-failed',
        empty: 'status-capsule-empty',
        vectoring: 'status-capsule-vectoring',
        completed: 'status-capsule-completed',
        all: 'status-capsule-all',
      }
      return classMap[status] || 'status-capsule-all'
    }

    const handleClickOutside = event => {
      if (containerRef.value && !containerRef.value.contains(event.target)) {
        isOpen.value = false
      }
    }

    onMounted(() => {
      document.addEventListener('click', handleClickOutside)
    })

    onUnmounted(() => {
      document.removeEventListener('click', handleClickOutside)
    })

    return {
      isOpen,
      containerRef,
      toggleDropdown,
      selectOption,
      getStatusLabel,
      getStatusCapsuleClass,
    }
  },
}
</script>

<style scoped>
.status-select-container {
  position: relative;
  display: inline-block;
  min-width: 100px;
}

.status-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 28px;
}

.status-select-trigger:hover {
  border-color: var(--primary-color);
}

.status-select-trigger.is-open {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.dropdown-arrow {
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  transition: transform 0.2s;
}

.status-select-trigger.is-open .dropdown-arrow {
  transform: rotate(180deg);
}

.status-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-top: 2px;
}

.dropdown-options {
  /* 移除最大高度限制，让下拉框自动适应内容 */
}

.dropdown-option {
  padding: 6px 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dropdown-option:hover {
  background-color: #f5f5f5;
}

.dropdown-option.is-selected {
  background-color: #e6f7ff;
}

/* 状态胶囊样式 */
.status-capsule {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  color: white;
  white-space: nowrap;
}

.status-capsule-all {
  background-color: #f0f0f0;
  color: var(--text-color);
}

.status-capsule-pending {
  background-color: #faad14;
}

.status-capsule-success {
  background-color: var(--success-color);
}

.status-capsule-failed {
  background-color: var(--error-color);
}

.status-capsule-empty {
  background-color: #d9d9d9;
  color: var(--text-color);
}

.status-capsule-vectoring {
  background-color: #722ed1;
}

.status-capsule-completed {
  background-color: #1890ff;
}
</style>
